<template>
  <div>
    <h1>选课管理</h1>
<!--    表单区域-->
    <el-table :data="selectForm"  border stripe>
      <el-table-column label="课程名称" prop="name" ></el-table-column>
      <el-table-column label="授课老师"prop="teacherName"></el-table-column>
      <el-table-column label="课时" prop="plan"></el-table-column>
      <el-table-column label="学分"prop="credit" ></el-table-column>
      <el-table-column label="操作">
<!--  添加选课-->
        <template slot-scope="scope">
        <el-button type="text" @click="addSelect(scope.row.id)">选课</el-button>
<!--  删除选课 -->
        <el-button type="text"@click="deleteSelect(scope.row.id)">退课</el-button>
        </template>
      </el-table-column>
    </el-table>
<!--    分页区域-->
<!--添加用户对话框-->
    <el-dialog
        title="提示"
        :visible.sync="addDialogvisble1"
        width="30%"
        center>
      <span >选课成功!</span>
      <span slot="footer" class="dialog-footer">
         <el-button type="primary" @click="addSelected()" size="mini">确 定</el-button>
    <el-button @click="addDialogvisble1=false"size="mini">取 消</el-button>

  </span>
    </el-dialog>

    <el-dialog
        title="提示"
        :visible.sync="addDialogvisble"
        width="30%"
        center>
      <span >退课成功!</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deleteSelected()" size="mini">确 定</el-button>
    <el-button @click="addDialogvisble= false"size="mini">取 消</el-button>

  </span>
    </el-dialog>

  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedCurrm:0,
      studentName:global.username,
      selectForm: [],
      addDialogvisble:false,
      addDialogvisble1:false

    }
  },
  created(){
    this.getCurrms();
  },
  methods:{
    addSelect(prop){
      this.addDialogvisble1=true;
      this.selectedCurrm = prop;
    },
    deleteSelect(prop){
      this.addDialogvisble=true;
      this.selectedCurrm = prop;
    },
    addSelected(){
      this.$http.get('/addCurrm', {
        params: {
          id: this.studentName,
          currmId:this.selectedCurrm
        }
      }).then(
          res =>{
            // if(res.data.state!=200)
              console.log(this.selectedCurrm)
          },res =>{
            console.log(res.state);
          })
      this.addDialogvisble=false;
      this.addDialogvisble1=false;
    },
    deleteSelected(){
      this.$http.get('/deleteCurrm', {
        params: {
          id: this.studentName,
          currmId:this.selectedCurrm
        }
      }).then(
          res =>{
            // if(res.data.state!=200)
            console.log(this.selectedCurrm)
          },res =>{
            console.log(res.state);
          })
      this.addDialogvisble=false;
      this.addDialogvisble1=false;
    },
    getCurrms(){
      this.$http.get('/currms', {
      }).then(
          res =>{
            this.selectForm = res.data.data;
          },res =>{
            console.log(res.state);
          })
    },
  }
}
</script>

<style lang="less" scoped>

.el-pagination{
  margin-top: 10%;

}
</style>